<template>
    <div class="orderSettlement">
        <Back title="订单结算" :sticky="true" />

        <!-- 地址选择 -->
        <div class="addressChoice">
            <!-- 自提 外送 开关 -->
            <div class="switch">
                <van-switch
                    v-model="selfMention_Delivery"
                    class="switch_1"
                    active-color="#2c2cb9"
                    inactive-color="#2c2cb9"
                />
                <div
                    class="selfMention"
                    :class="{ select: !selfMention_Delivery }"
                >
                    自提
                </div>
                <div class="delivery" :class="{ select: selfMention_Delivery }">
                    外送
                </div>
                <van-switch v-model="selfMention_Delivery" class="switch_2" />
            </div>

            <!-- 详细地址 -->
            <div class="address_box" v-show="selfMention_Delivery">
                <van-cell
                    center
                    value=""
                    is-link
                    :label="
                        selectAddress.name
                            ? `${selectAddress.name} ${selectAddress.tel}`
                            : '没有默认地址，请选择'
                    "
                    @click="YesShow"
                >
                    <template #title>
                        <div class="span">
                            <span class="custom-title">{{
                                selectAddress.address
                            }}</span>
                            <van-tag
                                type="danger"
                                round
                                color="#e99036"
                                v-show="selectAddress.isDefault"
                                >默认</van-tag
                            >
                        </div>
                    </template></van-cell
                >
            </div>
            <!-- 店铺地址 -->
            <div class="address_box" v-show="!selfMention_Delivery">
                <van-cell center value="" label="服务人员 16600000001">
                    <template #title>
                        <div class="span">
                            <span class="custom-title">梅溪湖中心店</span>
                            <van-tag
                                type="danger"
                                round
                                color="#e99036"
                                class="lately"
                                >最近</van-tag
                            >
                            <van-icon name="location" class="icon" />
                        </div> </template
                ></van-cell>
            </div>
        </div>

        <!-- 订单商品信息 -->
        <div class="orderInformation_box">
            <div class="p1">订单信息</div>
            <div class="information_box">
                <div
                    class="informationItm_box"
                    v-for="(item, index) in orderData"
                    :key="index"
                >
                    <IformationItm :itemData="item" />
                </div>
            </div>
            <div class="more" v-if="!isShowMore" @click="showMore">
                显示更多商品 <van-icon name="arrow-down" />
            </div>
            <!-- 分割线 -->
            <div class="splitLine"></div>

            <!-- 数据结算盒 -->
            <div class="settlement">
                <div class="p2">共计 {{ amount }} 件商品</div>
                <div class="p3">
                    总计<span :style="{ color: 'red' }">￥</span
                    ><span class="span">{{ total }}</span>
                </div>
            </div>
        </div>

        <van-popup v-model="show" closeable position="bottom">
            <p class="p4">选择地址</p>
            <div class="box">
                <van-address-list
                    v-model="chosenAddressId"
                    :list="list"
                    default-tag-text="默认"
                    @add="onAdd"
                    @select="select"
                />
            </div>
        </van-popup>

        <!-- 结算按钮 -->
        <div class="settlement_btn">
            <van-cell
                @touchstart.native.stop="boardShow = true"
                @click="settlement"
            >
                <van-button
                    type="primary"
                    block
                    round
                    color="linear-gradient(180deg, #dcc69f, #b09162)"
                    >立刻结算</van-button
                ></van-cell
            >
        </div>

        <van-overlay :show="overlayShow" @click="overlayShow = false">
            <van-password-input
                :value="value"
                :mask="false"
                :focused="boardShow"
                :class="{ left: boardShow }" />
            <van-number-keyboard
                v-model="value"
                title="模拟付款：密码246809"
                :show="boardShow"
                theme="custom"
                extra-key="."
                close-button-text="取消"
                @hide="onDomplete"
                @blur="boardShow = false"
                @input="onInput"
        /></van-overlay>
    </div>
</template>

<script>
import IformationItm from '../components/InformationItm.vue'
import Back from '../components/Back';
import { Toast } from 'vant';

export default {
    name: 'OrderSettlement',
    components: {
        Back,
        IformationItm
    },

    data() {
        return {
            // 全部的 订单商品的数据
            AllOrderData: [],
            // 初始显示个数
            initCount: 3,
            //显示的 订单商品的数据
            orderData: [],
            //是否显示更多商品数据
            isShowMore: false,

            // 自提f / 外送t
            selfMention_Delivery: true,

            // 地址数据
            list: [],

            // 选中的地址 下标
            chosenAddressId: '',
            // 选中的地址
            selectAddress: {
                name: null,
                tel: null,
                address: null
            },



            // 地址弹出层开关
            show: false,

            // 密码开关
            boardShow: false,
            overlayShow: false,
            // 密码
            value: "",
        }
    },
    methods: {
        // 弹出 选择地址 弹出层
        YesShow() {
            this.show = true;
        },

        // 获取订单数据
        getOrderData(sids) {
            this.axios({
                method: 'get',
                url: '/commitShopcart',
                params: { sids }
            }).then(res => {

                if (res.data.code === 700) {
                    return this.$router.push({ name: "Logon" });
                }

                if (res.data.code === 50000) {
                    // 存储订单商品全部数据
                    this.AllOrderData = res.data.result;

                    // 控制 显示商品的数量
                    this.orderData.push(...this.AllOrderData.slice(0, this.initCount));
                    //控制 显示更多的开关
                    if (this.AllOrderData.length <= this.initCount) {
                        this.isShowMore = true;
                    }
                }

            }).catch(err => {

            })
        },

        // 跳转到 添加 地址页面 
        onAdd() {
            this.$router.push({ name: 'AddEditLand' });
        },

        //   查询地址接口
        getFindAddress() {

            this.axios({
                method: "GET",
                url: '/findAddress'
            }).then((res) => {
                // 
                if (res.data.code === 700) {
                    return this.$router.push({ name: "Logon" });
                }

                if (res.data.code === 20000) {

                    res.data.result.forEach((v) => {
                        v.address = v.province + v.city + v.county + v.addressDetail;
                        v.isDefault = Boolean(v.isDefault);

                        if (v.isDefault) {
                            this.selectAddress = v;

                            this.chosenAddressId = v.aid;
                        }
                    });


                    this.list = res.data.result;


                }
            }).catch((err) => {

            });
        },

        // 选择地址
        select(v) {
            this.chosenAddressId = v.aid;
            this.selectAddress = v;

        },

        // 显示更多商品
        showMore() {
            // 控制 显示商品的数量
            this.orderData.push(...this.AllOrderData.slice(this.initCount));
            // 关闭控件
            this.isShowMore = true;
        },

        // 立刻结算按钮
        settlement() {
            // 判断外送地址 是否选择
            if (this.selfMention_Delivery) {
                if (!this.selectAddress.tel) {
                    Toast.fail('请选择地址');
                    this.overlayShow = false;
                    return
                }
            }
            this.overlayShow = true;
        },

        // 请求立刻结算
        pay() {

            this.axios({
                method: "POST",
                url: "/pay",
                data: {
                    sids: this.$route.query.sids,
                    phone: this.selfMention_Delivery ? this.selectAddress.tel : 16600000001,
                    address: this.selfMention_Delivery ? this.selectAddress.address : "梅溪湖中心店",
                    receiver: this.selfMention_Delivery ? this.selectAddress.name : "服务人员 "
                }
            }).then((result) => {

                if (result.data.code === 700) {
                    return this.$router.push({ name: "Login" });
                }

                if (result.data.code === 60000) {
                    Toast.success('支付成功');
                    setTimeout(() => {
                        //跳转到指定页面
                        this.$router.push({ name: 'MyOrder' });
                    }, 1500)
                }

            }).catch((err) => {

            });
        },

        // 密码键盘 输入
        onInput(key) {
            let whole = this.value + key;

            if (whole.length >= 6) {
                this.boardShow = false;
                this.value = "";
                //密码正确 
                this.$toast.loading({
                    message: '正在支付中...',
                    forbidClick: true,
                    duration: 0
                });
                if (whole === '246809') {

                    setTimeout(() => {
                        this.$toast.clear();
                        this.pay()
                    }, 3001)
                }
                // 密码错误
                else {
                    setTimeout(() => {
                        this.$toast.clear();
                        Toast.fail('密码错误');
                        this.overlayShow = false;
                    }, 1005);
                }
            }

        },

        // 密码键盘 取消
        onDomplete() {
            this.value = "";
            this.overlayShow = false;
        }
    },

    computed: {
        // 总数
        amount() {
            let num = 0;
            this.AllOrderData.forEach((v) => {
                num += v.count;
            })

            return num
        },
        // 总价
        total() {
            let num = 0;
            this.AllOrderData.forEach((v) => {
                num += Number(v.price) * v.count;
            })

            return num
        }
    },

    // 初始化钩子
    created() {

        // 
        this.getOrderData(this.$route.query.sids);
        this.getFindAddress();

        // 获取初始配送方式
        if (sessionStorage.getItem("selfMention_Delivery") === 'false') {
            this.selfMention_Delivery = false;
        }
    },
}
</script>

<style lang="less" scoped>
.orderSettlement {
    padding-bottom: 90px;
    background-color: #f0f2f3;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: scroll;

    // 地址盒
    .addressChoice {
        margin: 20px 15px 15px;

        // 自提 外送 选择器
        .switch {
            position: relative;
            padding-bottom: 40px;
            .selfMention {
                position: absolute;
                color: #fff;
                top: 7px;
                left: 10px;
            }
            .delivery {
                position: absolute;
                color: #fff;
                top: 7px;
                left: 50px;
            }
            .select {
                color: #0a0ab3;
            }
            .switch_1,
            .switch_2 {
                position: absolute;
                top: 0;
                width: 2.8em;
                height: 0.8em;
            }
            .switch_2 {
                opacity: 0;
            }
            /deep/ .van-switch__node {
                width: 1.4em;
                height: 0.8em;
                border-radius: 20px;
            }
            /deep/ .van-switch--on .van-switch__node {
                transform: translateX(1.4em);
            }
        }

        // 地址文本盒
        .address_box {
            /deep/ .van-cell {
                border-radius: 10px;
                padding: 10px;
                background-color: #fff;
            }
            /deep/ .van-cell__title {
                flex: none;
                width: 94%;
                .span {
                    line-height: 24px;
                    width: 100%;
                    position: relative;

                    .custom-title {
                        display: inline-block;
                        font-weight: 600;
                        font-size: 16px;
                        width: 85%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        word-break: break-all;
                    }
                    .van-tag {
                        position: absolute;
                        top: 5px;
                        right: 10px;
                    }
                    .lately {
                        right: 165px;
                    }
                    .icon {
                        position: absolute;
                        color: #0c34ba;
                        top: 5px;
                        right: -10px;
                        font-size: 40px;
                    }
                }
            }
        }
    }

    // 订单商品盒
    .orderInformation_box {
        margin: 20px 15px 15px;
        background-color: #fff;
        border-radius: 10px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        padding: 10px;

        .p1 {
            font-size: 16px;
        }

        .information_box {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        // 分割线
        .splitLine {
            width: 100%;
            height: 0;
            border-top: 3px dotted #f0f2f3;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                left: -20px;
                top: -11px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #f0f2f3;
            }

            &::after {
                content: '';
                position: absolute;
                right: -20px;
                top: -11px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #f0f2f3;
            }
        }

        .more {
            text-align: center;
            color: #999;
            font-size: 14px;
            margin-bottom: 15px;
        }
    }

    // 数据结算盒
    .settlement {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        margin-top: 20px;
        margin-bottom: 5px;

        .p3 {
            font-size: 12px;

            .span {
                font-weight: 600;
                font-size: 16px;
                color: red;
            }
        }
    }

    // 结算按钮
    .settlement_btn {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 5px 15px 20px;
        background-color: #f0f2f3;

        font-weight: 600;

        /deep/ .van-cell {
            background-color: #f0f2f3;
        }
        button {
            letter-spacing: 4px;
        }
    }

    // 选择地址 弹出层
    .van-popup--bottom {
        .box {
            max-height: 400px;
            overflow: scroll;
        }
        .p4 {
            font-weight: 600;
            font-size: 18px;
            margin-top: 15px;
            margin-bottom: 15px;
            margin-left: 20px;
        }
        /deep/ .van-address-item__value {
            padding: 0;
        }
        /deep/ .van-address-item__edit {
            display: none;
        }
        .van-button {
            background-color: #e99036;
            border-color: #e99036;
        }
    }

    // 密码盒
    .van-password-input {
        bottom: -333px;
    }
    .van-password-input__security {
        transform: translateX(375px);
        transition: transform 0.5s ease-out;
    }
    .left {
        transform: translateX(0px);
    }
}
</style>